<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
	</head>

	<body>
		<div class="col-lg-12" id="detailMatch">
			<ol class="breadcrumb">
				<li><i class="fa fa-home"></i>
					<a href="index.html">Home</a>
				</li>
				<li><i class=""></i>查看比赛资讯</li>
			</ol>

			<div class="mcomment">
				<h3 class="page-header"><i class=""></i>查看比赛资讯</h3>
				<!--比赛信息搜索-->
				<div class="row">
					<div class="input-group container-fluid" style="width: 50%;">
						<span class="input-group-addon">
							<i class="fa fa-search"></i>
							</span>
						<input v-model="searchBox" type="text" class="form-control" placeholder="输入想要搜索比赛" />
						<span class="input-group-btn">
							<button @click="searchNews(searchBox)" class="btn btn-default">搜索</button>
						</span>
					</div>
				</div>
				<!--比赛信息搜索结束-->

				<!--列表及操作-->
				<!--操作-->
				<div>
					<div class="row">
						<div class="input-group container-fluid" style="width: 25%;">
							<!--筛选-->
							<!--筛选选项-->
							<select v-model="comId" class="form-control">
								<option v-for="Match in types" v-bind:value="Match.comId">
									{{Match.laName}}
								</option>
							</select>
							<span class="input-group-btn">
										<button @click="searchtype" class="btn btn-default">筛选</button>
									</span>
							<!--筛选结束-->
						</div>
						<!--操作结束-->
					</div>
					<!--列表-->
					<div>
						<table class="table table-bordered table-hover table-responsive">
							<thead>
								<tr>
									<td>
										<strong>资讯标题</strong>
									</td>
									<td>
										<strong>比赛类型</strong>
									</td>
									<!--<td>
										<strong>图片</strong>
									</td>-->
									<!--<td>
										<strong>比赛报名连接</strong>
									</td>-->
									<!--<td>
										<strong>资讯内容</strong>
									</td>-->
									<td></td>
								</tr>
							</thead>
							<tr v-for='dm in matchnewslist'>
								<td>{{dm.title}}</td>
								<td>{{dm.laName}}</td>
								<!--<td>{{dm.route}}</td>-->
								<!--路径-->
								<!--<td>{{dm.link}}</td>-->
								<!--<td>{{dm.content}}</td>-->

								<td>
									<button data-toggle="modal" data-target="#seeNews" @click="copy(dm.inId,dm.comId)" class="btn btn-success">查看</button>
									<button data-toggle="modal" id="edb" data-target="#modifyNews" @click="copy(dm.inId,dm.comId)" class="btn btn-warning">修改</button>
									<button @click="delete1(dm.inId)" class="btn btn-danger">删除</button>
								</td>
							</tr>
						</table>
					</div>
					<!--列表结束-->

				</div>
				<!--列表及操作结束-->
				<!--分页导航-->
				<center>
					<ul class="pagination">
						<li>
							<a @click="getajax(1)">首页</a>
						</li>
						<li>
							<a @click="getajax(page-1)">上一页</a>
						</li>
						<li>
							<li v-for="value in showpage">
								<a style="background: red;" @click="getajax(value)" v-if="page==value">
									{{value}}
								</a>

								<a v-else @click="getajax(value)">{{value}}</a>

							</li>
						</li>
						<li>
							<a @click="getajax(page+1)">下一页</a>
						</li>
						<li>
							<a @click="getajax(countpage)">尾页</a>
						</li>
					</ul>
				</center>
				<!--分页导航结束-->
			</div>

			<!--修改弹出框 start-->
			<div class="modal" id="modifyNews" >
				<div class="modal-dialog">
					<div class="modal-content" style="width: 800px;">
						<div class="modal-header">
							<button class="close" data-dismiss="modal">
							<span>&times;</span>
										</button>
							<h4>修改资讯</h4>
						</div>

						<div class="modal-body">
							<table>

								<tr>
									<td>
										<label for="matchNewsTitle">资讯标题：</label>
									</td>
									<td>

										<input v-model="copys.title" type="text" class="form-control" id="matchNewsTitle" placeholder="请输入比赛资讯标题" />
									</td>

								</tr>

								<tr>
									<td>&nbsp;</td>
								</tr>

								<tr>
									<td>
										<label for="matchType">比赛类型：</label>
									</td>
									<td>
										<select v-model="copys.comId" class="form-control">
											<option v-for="type in types" v-bind:value="type.comId">
												{{type.laName}}
											</option>
										</select>
									</td>
								</tr>

								<tr>
									<td>&nbsp;</td>
								</tr>

								<!--<tr>
									<td>
										<label for="matchNewsPic">图片上传：</label>
									</td>
									<td>
										<input v-model="copys.route" type="file" class="form-control" id="matchNewsPic" />
									</td>
								</tr>

								<tr>
									<td>&nbsp;</td>
								</tr>-->

								<!--<tr>
									<td>
										<label for="matchUrl">比赛报名链接：</label>
									</td>
									<td>
										<input v-model="copys.link" type="text" class="form-control" id="matchUrl" placeholder="请输入比赛报名链接" />
									</td>

								</tr>
								<tr>
									<td>&nbsp;</td>
								</tr>-->

								<tr>
									<td colspan="2">
										<div class="form-group">
											<label for="matchNewsContent">资讯内容：</label>
											<!--<script v-model="copys.content" id="publishMatchNews" name="content" type="text/plain">
											</script>-->
											<!--<textarea v-model="copys.content" class="form-control" id="matchNewsContent" cols="100%" rows="10">-->
																														<!---->
											<!--</textarea>-->
											<textarea id="text1Modify"    class="form-control" style="display: none" >
											</textarea>
											<div id="meuenModify" class="toolbar">
											</div>
											<div style="padding: 5px 0; color: #ccc"></div>
											<div id="editorModify"   class="text" style="width: 100%;height: 100%;border:1px solid black"> <!--可使用 min-height 实现编辑区域自动增加高度-->

											</div>

										</div>

									</td>

								</tr>

							</table>
							<center>
								<div style="width: 50%;">
									<button class="btn btn-default" @click="publish(copys.inId)">发布</button>
									<button class="btn btn-danger" data-dismiss="modal">取消</button>
								</div>
							</center>

						</div>

					</div>
				</div>
			</div>

			<!--修改弹出框 end-->

			<!--查看弹出框 start-->
			<div class="modal" id="seeNews">
				<div class="modal-dialog">
					<div class="modal-content">
						<div class="modal-header">
							<button class="close" data-dismiss="modal">
							<span>&times;</span>
						</button>
							<h4>查看资讯</h4>
						</div>

						<div class="modal-body">

								<table class="table table-bordered">


								<tr>
									<td><label for="awardPersonName">资讯标题：</label></td>
									<td><input v-model="copys.title" class="form-control " type="text" readonly="readonly" /></td>

								</tr>
								<tr>
									<td><label for="awardPersonName">类型：</label></td>
									<td><input v-model="copytype" class="form-control " type="text" readonly="readonly" /></td>

								</tr>

								<tr>
									<td colspan="4">
										<div class="form-group">
											<label for="awardContent">内容：</label>
											<div disabled="disabled" v-html="copys.content" class="form-control" id="matchNewsContent" style="width: 100%;height: 100%">

											</div>
										</div>

									</td>

								</tr>

							</table>

						</div>

					</div>
				</div>
			</div>

			<!--查看弹出框 end-->

			<!--查看弹出框 end-->

		</div>

		<script type="text/javascript">
			var url1 = 'http://donting.free.idcfengye.com';
			var editor;
			var dm = new Vue({

				el: '#detailMatch',

				data: {

					searchBox: '',
					count: '10', //总记录数
					countpage: '3', //总页数
					page: '2', //当前页
					showpage: [],

					comId: '', //类型id
					types: [], //类型列表
					searchtype: '',

					matchnewslist: [],
					copys: {},
					copytype: '',

				},
				methods: {
					//						修改
					publish: function(inId) {
						var x=document.getElementById("text1Modify");


						dm.copys.content=x.value;


						axios.defaults.withCredentials = true;

						axios.post(url1 + '/information/modify', {　

								'inId': inId,
								'title': dm.copys.title, //标题
								'comId': dm.copys.comId, //类型id
								//								'link': dm.copys.link, //比赛报名链接
								'route': dm.copys.route, //图片路径
								'content': dm.copys.content, //比赛内容

						}).then(function(response) {
							var rs = response.data;


							console.log(rs.code);　　
							if(rs.code == 200) {
								alert("修改成功!");
								console.log("修改成功!");
								dm.getajax(1);
							} else {
								console.log("修改失败!");
								alert("修改失败!");
							}

						}).catch(function(error) {　　
							console.log("修改连接超时！");
						});
					},

					delete1: function(id) {
						axios.defaults.withCredentials = true;
						axios.get(url1 + '/information/delete', {　
							params: {
								'inId': id
							}
						}).then(function(response) {
							var rs = response.data;
							console.log(rs.code);
							if(rs.code == 200) {

								console.log("删除成功!");
								dm.getajax(1);
							} else {
								console.log("删除失败!");
							}

						}).catch(function(error) {　　
							console.log("连接超时！");
						});
					},

					getajax: function(page) {

						if(page <= 0) {
							console.log("没有上一页");
							return;
						}
						if(page > this.countpage) {
							console.log("没有下一页了");
							return;
						}

						axios.defaults.withCredentials = true;

						axios.get(url1 + '/information/findAllPage', {
							params: {
								'page': page
							}
						}).then(function(response) {
							let rs = response.data;　

							if(rs.code == 4003) {
								console.log("无数据");
								return;
							} else if(rs.code != 200) {}

							dm.countpage = rs.countpage;
							dm.page = rs.page;
							dm.count = rs.count;
							dm.matchnewslist = rs.data;

							var cout = 0;
							var pa = [];
							if(rs.page <= 3) {

								for(var i = 1; i <= dm.countpage && cout < 5; i++) {
									pa.push(i);
									cout++;
								}

							} else {

								if(rs.countpage - rs.page >= 2) {
									pa.push(rs.page - 2);
									pa.push(rs.page - 1);
									pa.push(rs.page);
									pa.push(rs.page + 1);
									pa.push(rs.page + 2);
								} else {
									pa.push(rs.countpage - 4);
									pa.push(rs.countpage - 3);
									pa.push(rs.countpage - 2);
									pa.push(rs.countpage - 1);
									pa.push(rs.countpage);

								}

							}
							dm.showpage = pa;

						}).catch(function(error) {　　
							console.log("连接超时！");
						});

					},
					//						getajaxEnd---------------------

					copy: function(inId, comId) {
						console.log(inId + "--" + comId);


						for(var i = 0; i < dm.matchnewslist.length; i++) {
							if(inId == dm.matchnewslist[i].inId) {

								dm.copys = dm.matchnewslist[i];

								console.log(dm.copys.comId + "--dm.copys.comId");

								for(var j = 0; j < dm.types.length; j++) {
									if(comId == dm.types[j].comId) {
										dm.copytype = dm.types[j].laName;
										console.log(dm.copytype + "---laName");
										editor.txt.html(dm.copys.content);
										return;
									}
								}

								return;
							}
						}

					},

					searchNews: function(searchBox) {},

				},
				mounted() {
					this.getajax(1);
					GetType(this);


					var E = window.wangEditor

					 editor =new E('#meuenModify', '#editorModify');
					var $text1 = $('#text1Modify')
					editor.customConfig.withCredentials = true
					editor.customConfig.uploadFileName = 'file';
					editor.customConfig.uploadImgServer = url1+'/addEdImgUp'

					editor.customConfig.onchange = function (html) {
						// 监控变化，同步更新到 textarea
						$text1.val(html)
						console.log("更新...")
					}

					editor.create()


				}

			})
		</script>

	</body>

</html>